<template>
  <div class="wechat-service-page">
    <el-card class="wechat-service-card">
      <div class="wechat-service-content">
        <h3>微信客服</h3>
        <p>接入后你可以使用智能在线客服系统统一接收与回复顾客咨询</p>
        <el-button type="primary" @click="bindWechat">一键接入微信客服</el-button>
        <el-divider></el-divider>
        <div class="wechat-account">
          <el-card class="account-card">
            <div class="account-info">
              <img src="https://via.placeholder.com/50" alt="WeChat Logo" class="wechat-logo" />
              <div class="account-details">
                <p>二师兄在人间</p>
                <p>授权时间：2024年4月16日</p>
              </div>
              <el-link type="primary" @click="revokeAuthorization">取消授权</el-link>
            </div>
          </el-card>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";

const bindWechat = () => {
  // 模拟微信绑定功能
  ElMessage.success("跳转到微信平台授权绑定");
};

const revokeAuthorization = () => {
  // 模拟取消授权功能
  ElMessage.success("已取消授权");
};
</script>

<style scoped>
.wechat-service-page {
  padding: 20px;
}

.wechat-service-card {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.wechat-service-content {
  padding: 20px;
}

.el-divider {
  margin: 20px 0;
}

.wechat-account {
  margin-top: 20px;
}

.account-card {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #dcdcdc;
}

.account-info {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}

.wechat-logo {
  width: 50px;
  height: 50px;
  margin-right: 20px;
}

.account-details {
  flex: 1;
}

.el-link {
  margin-left: 20px;
}
</style>
